Introduktion til kurset
rust-fjerner bl.a. Unit test

Begrebs-kort.

Walkthrough: Create and run unit tests for managed code
Use code coverage to determine how much code is being tested
Order Unit Tests

Thomas Hamilton:
Boundary Value Analysis and Equivalence Partitioning Testing, guru 99, 2021

Unit Testing (Power point)

Begrebs-kort (Power point)

Git og GitHub
Git download: https://git-scm.com/
Online Book: Pro Git
VS2022: How Visual Studio makes version control easy with Git
GitHub Desktop: GitHub Desktop

Har du den nødvendige software:

• Visual Studio Enterprise 2022
  Du får licens-nøgle fra Azure Dev Tools (tidligere Microsoft Imagine)
• GitHub Desktop

Diverse (Administration):

• LinkedIn.com særligt gruppen "Zibat, Computer Science and Web Development, Alumni"
• Tilføj / opdater din kontakt-information ums.zea.dk (adresse + mobile nummer)
• Forward din email fra Office 365 (name@edu.zealand.dk) til en email-konto du læser ofte …
  

Eksempler (Kode vist i klassen):
TryingUnitTesting.zip (kode vist i klassen)

Exercise:
Gennemgå og diskuter parvist følgende eksempel: 
BookLibValidatorUnitTest

Exercise:
Læs og afprøv følgende tutorials:
Walkthrough: Create and run unit tests for managed code

Extra: Hackerrank.com Programmerings-konkurrencer osv etc

Component + unit test

SoftwareComponents.pptx

Microsoft .Net Core Guide:
Create a .NET class library using Visual Studio
Test a .NET class library with .NET using Visual Studio

Exercise:
Læs og afprøv følgende tutorials:
Create a .NET class library using Visual Studio
Test a .NET class library with .NET using Visual Studio

Calculator Part1 (.Net Standard library)
Calculator Part2 (program/applikation)

Bemærk:
Når man skal distribuere en dll fil med kommentarer, skal disse først genereres i et XML-dokument. Dette gøres ved under page properties -> output at afkrydse "generate XML- document". Det genererede xml-dokument skal medsendes sammen med dll filen.
Når dll-filen skal anvendes i et projekt er det nok at tilføje en reference til dll-filen (xml-dok skal ligge i samme mappe).

Bemærk:
Da vi anvender "open source" (koden er ikke obfuskeret), så kan vi højre-klikke på en metode og anvende "go to implementation" og se kilde koden.

Cloud:
Simply.com

Vejledning i Webhotel.pdf
Workarounds til subdomaine.pdf

Examples (Kode vist i klassen):
https://github.com/andersbor/MoviesRepositoryLib

Exercise:
Repository (liste)

Extra: Generisk repository-klasse: Kan du lave en klasse Repository<T> med de vanlig metoder?
Extra: Dictionary: Kan du lave en Repository klasser, der bruger et Dictionary i steder for en List?
Hvilke fordele og ulemper er der ved List henholdsvis Dictionary?

Visual Studio Code
HTML, DOM
CSS + Bootstrap
Publicer HTML+CSS til Microsoft Azure
JavaScript

HTML
W3Schools HTML5 Tutorial
W3Schools HTML DOM intro

CSS
W3Schools CSS Tutorial

Bootstrap
W3Schools Bootstrap 5 Tutorial

Responsive Web Design - The Viewport

JavaScript
W3Schools JavaScript Tutorial
 (læs det hurtigt - ikke alt er vigtigt)
Vi bruger Vue.js så document.getElementById(...) er sjældent nødvendigt for os.

Linkedin/learning (ekstra):
Morten Rand-Hendriksen: JavaScript Essential Training (video)
(Giver en udførlig gennemgang af JavaScript, skip "Linting and formatting" i første omgang)

Examples (Kode vist i klassen):
MoviesRepositoryLib.zip (Updatet)

Exercise:

1. Quick:  w3schools.com/html prøv nogle [men bestemt ikke alle] "Try it Yourself" (den grønne knap) eksempler

2. Brug W3C HTML validator til at validere nogle web-sider f.eks. http://anbo-easj.dk/ og https://www.zealand.dk/ Hvis du finder en web-side med en masse ulovligt HTML, så prøve at vise siden i forskellige browsere. Måske er der forskel på hvordan browserne viser siden.

3. HTML Quiz

4. Download og installer Visual Studio Code

5. Brug Visual Studio Code til at lave et par web-sider med links mellem siderne.

   Husk at validere dine web-sider.

6. w3schools.com/css prøv nogle [men bestemt ikke alle] "Try it Yourself" (den grønne knap) eksempler

7. Tilføj in-line styles til nogle HTML elementer på en af dine HTML-dokumenter.

8. Tilføj et internt style sheet til et af dine HTML dokumenter

9. Lav et eksternt style sheet (css fil) og link det til mindst to af dine HTML-dokumenter.

10. Upload dine HTML og CSS filer til Azure. Brug FTP, eller brug Kudu console (“Upload files and folder using drag and drop”)
    How-to video om hvordan man laver et tomt web app projekt i Azure
    How-to video om hvordan man uploader projekt til web app i Azure

11. Validate dit CSS

12. CSS Quiz, har du lært tilstrækkeligt CSS .... Lad være med at gætte - find svarne w3schools.com/css

13. Installer Git (måske har du allerede gjort det … måske uden at vide det …)

14. Live Server en god extension til Visual Studio Code

15. Check om din (eller min)  web-side er  mobile friendly

16. www.w3schools.com/bootstrap4/  prøv nogle [men bestemt ikke alle] "Try it Yourself" (den grønne knap) eksempler

Exercise:
Hvis JavaScript er helt "nyt" for dig kan du lave føglende exercises i Codecademy:
Codecademy: https://www.codecademy.com/learn/introduction-to-javascript

Er din webside mobilvenlig? er min?

Vue3 intro (slides)

Vue Mastery: Intro to Vue.js (video)
Vuejs.org: Vue Introduction

Vue Essentials Cheat Sheet, specielt side 1
Vue3 CheatSheet for developers

Eksempler (Kode vist i klassen):
SayHelloVue3
Vue3Examples


Exercise: (Vue.js)
Gennemgå Intro to Vue.js og løs diverse Challenge (frem til section 6 Event handling)

Alternativ, gennemgå:

1. Microsoft: Get Started with Vue 
2.  Dynamic page display with Vue.js
3.  Work with data and event in Vue.js

Collect words using JavaScript and Vue.js
Calculator with JavaScript + Vue.js

Tilføj noget Bootstrap til din løsning på Collect Words og Calculator opgaverne

Upload din web-applikation til Microsoft Azure.
Benyt FTP, eller Kudu console (“Upload files and folder using drag and drop”)

Solution:
Calculator
Collect Words

41

11/10

Web-applikationer: UI test med Selenium

JavaScriptScript: DOM manipulation

JavaScript: Consume REST (Axios),
promises

Selenium
Unit testing Web applications (Power Point)
SeleniumHQ

Axios

1. Sebastian Eschweiler Getting Started with Axios
   This is a JavaScript tutorial. We should convert to TypeScript.
2. GitHub Axios documentation
3. Travis Horn Building json2table: Turn JSON into an HTML table
   
4. Joy Waguru: Asynchronous Javascript using Async - Await
5. Extra: GitHub offers a REST API. Try it. How to display the data?

1. Download a driver suitable for your browser: Chrome | FireFox
   Unzip the drivers and save them in a folder like c:\webDrivers.
   If your browser updates, you must download a new version of the webdriver (Chrome updates frequently …)
2. UI testing: Collect Words | solution
3. UI test for your Calculator web application | solution
   Hint: How to select an option from drop down using Selenium WebDriver C#?

Eksempler (Kode vist i klassen):
REST GET example (Vue Posts): JS, Vue, async/await
REST GET, DELETE, POST example (Vue Cars) | REST service provider
General REST consumer (check for CORS availability)
Extra Generic Table

Exercise:

1. Go through Getting Started with Axios
2. GET some data from http://jsonplaceholder.typicode.com/todos and show the data in the browser using Vue.js.
   Look at the REST GET example (Posts) for inspiration.
3. Use the Bookstore REST API to create a web application | solution
   Look at the Cars example for inspiration.
   Hint: First ignore query string parameters provided by the REST controller. Later you can use the query string parameters ...
4. Push your web application to GitHub.
5. Upload your web application to Microsoft Azure.
   Use FTP, or use the Kudu console (“Upload files and folder using drag and drop”).
   If your browser complains about mixed content … make sure you request your web-page using http://…., not https://….
6. Add some Bootstrap styling to one (or more) of your JavaScript + Vue.js applications.
   Make buttons etc look nicer + add some responsiveness (adapt to browser width)
7. More JavaScript projects: Consume the REST services you made in TEK class.

Selenium UI test fortsat
- Test af WebApps der benytter REST services

Sorting + filtering af data i JavaScript (front-end) eller i REST (back-end)

Vue components

Selenium: Explicit and implicit waits

Vue Components
Getting started with Vue CLI and single-file components in Vue.js, Microsoft

Components Basic, Vue.js.
Stop før afsnittet Emitting a Value With an Event

Example: 
How-to video om hvordan man uploader fra Visual Code til GitHub.

Make a UI test for your web application - an application consuming a REST service.
Example UI test

Eksempler (Kode vist i klassen):
Selenium
REST GET, DELETE, POST example (Vue Cars) + UITestCarsAsynRest

Sorting/filtering:
booksSortingJavaScript, sorting + filtering books in JavaScript (VSCode)
booksSortingREST, JavaScript calling REST to sort books (VSCode)
RESTbooksStatusCodes, REST including methods for sorting (VS2019)

Components
Vue3ComponentButtonCounter

Exercise:

• Make a UI test for your web application - an application consuming a REST service.
  Example UI test
• Make some web applications (HTML + JavaScript) using other peoples REST services. Start interacting with the REST services in a browser or in Postman.
  A list of some REST services. If you find one REST service difficult to use, go to the next in line - or find another REST service yourself.
  You can use the CORS checker to see if a REST service supports CORS

• GitHub REST API https://api.github.com/ 
• Try Googling “weather rest api free”: Find a REST service and try it..
  Maybe you’ll find this: https://vejr.eu/pages/api-documentation (notice no CORS, not useful) or https://openweathermap.org/api (more useful)
  Simple weather forecast https://www.7timer.info/bin/civillight.php?lon=12.1&lat=55.6&ac=0&unit=metric&output=json&tzshift=0 
  More advanced weather forecast (more data = a lot of JSON) https://www.7timer.info/bin/civil.php?lon=12.1&lat=55.6&ac=0&unit=metric&output=json&tzshift=0   
• Danish car register https://www.motorapi.dk/ , https://www.nummerpladeapi.dk/ (cars from Denmark, Sweden and Norway)
• DAWA Danmarks Adresser REST API including BBR (Bygnings og Bolig-registret = all Danish buildings)
• DataForderdeleren, a lot of Danish data
• Marine Traffic
• FBI Most Wanted 
• Wine etc (using POST, not GET!)
  Since you must send a POST request, use Postman to try the service

Exercise:
Gennemfør eksemplerne fra Components Basic, Vue.js.
Stop før afsnittet Emitting a Value With an Event
Der er 2 eksempler (button-counter, blog-posts), så lav 2 selvstændige projekter.

DevOps
(CI/CD) Continuous Integation & Continous Delivery
GitHub Actions:

• Workflow
• Jobs
• Steps
• Events
• Runner
• Shell Script
• Actions

Parprogrammering - opstart

DevOps, CI/CD og GitHub actions

Microsoft: Hvad er DevOps?
RedHat: What is CI/CD?
Isaac Sacolick (InfoWorld 2020):
What is CI/CD? Continuous integration and continuous delivery explained
Anders Børjesson: DevOps: Continuous Deployment with Github Actions
Microsoft:
Deploy your application to Azure using GitHub Actions workflows created by Visual Studio
Davide Bevegnu: GitHub Actions with no YAML, includes video
Ekstra: DevOps Resource Center, Microsoft

LinkedIn Learning:
Learning GitHub Actions

LinkedIn Learning (ekstra):
GitHub Actions for CI/CD
Practical GitHub Actions
Learning Github (hvis du ikke før har benyttet GitHub eller trænger til en lille rep)

LinkedIn learning - Gratis adgang; tilmeld med Zealand e-mail konto: https://www.linkedin.com/learning/activate

Pair programming, including remote pair programming.
Inviting Collaborators to a private repository
GitHub Copilot | Sign up

Exercise:
Gennemgå materialet incl kurset: Learning GitHub Actions

Exercise:

1. Lav en simpel REST controller: Model class, Repository class, Controller
2. Tilføj en unit test til Repository Class
3. Push til GitHub
4. Push til Azure vha GitHub Actions
   
   

Exercise:
REST + JavaScript from user stories (pair programming)

Parprogrammering - fortsat

A note on pair programming, including remote pair programming.

Visual Studio Live Share
Live Share Extension Pack for Visual Studio Code
Inviting Collaborators to a private repository

REST + JavaScript from user stories (Pair programming)

BEMÆRK:
Prøve-eksamen 2 PROG+TEK
Onsdag d. 20/12 kl 9-13++.

Prøve-eksamen er en af de obligatoriske studie-aktiviteter jf. Studieordningen = deltagelsespligt!

PROG+TEK eksamen (16-19. januar)

Træningssæt (Eksamensopgaver fra juni 2023)

Opgave A Movie.docx
Opgave B House.docx
Opgave C Tool.docx
Opgave D Water flow.docx
Opgave Re-eksamen Dice.docx